<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打印预订订单</title>
    <style>
      @page {
        margin: 0;
      }
      /**打印样式增加内边距*/
      @media print {
        .bill-card-box {
          width: 72.1mm;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 2mm;
          box-sizing: border-box;
        }
      }
      .bill-card-box .title {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: center;
        color: #000;
      }

      .bill-card-box .description {
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: center;
        color: #000;
        margin: 4px 0;
      }

      .bill-card-box .desc-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 4px;
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        color: #000;
      }

      .bill-card-box .desc-item .remark-desc {
        max-width: 250px;
        text-align: right;
      }

      .bill-card-box .desc-item .desc-item-right {
        display: flex;
        align-items: center;
      }
      .good-sku-item {
        margin-top: 4px;
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
        line-height: 18px;
      }

      .bill-card-box .desc-item .desc-item-right p {
        margin-left: 20px;
      }

      .bill-card-box .good-list-box {
        margin-top: 4px;
      }

      .bill-card-box .good-list-box .good-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
      }

      /* .bill-card-box .good-list-box .good-item .good-name {
            width: 100px;
            line-height: 16px;
            text-align: left;
        } */

      .bill-card-box .good-list-box .good-item .good-right-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 72px;
      }

      .good-right-box p {
        margin: 0px;
      }

      .bill-card-box .desc-line {
        width: 100%;
        height: 1px;
        background: #000;
        margin-top: 4px;
      }

      .bill-card-box .desc-title {
        font-size: 15px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000;
        margin: 6px 0 4px 0;
      }

      .bill-card-box .address-phone-box {
        margin-top: 80px;
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        text-align: center;
        color: #000;
        line-height: 24px;
      }

      .bill-card-box .address-phone-box div {
        margin-bottom: 4px;
      }
    </style>
  </head>

  <body>
    <div id="order">
      <div class="bill-card-box" v-if="postMessageDatas">
        <div class="title">{{ postMessageDatas.detail.shopInfo.shop_name }}</div>
        <div class="description">【预订单】</div>
        <div class="desc-item">
          <div>预订单号：</div>
          <span>{{ postMessageDatas.ticket_id || '' }}</span>
        </div>
        <div class="desc-item">
          <div>操作人：</div>
          <span>{{ postMessageDatas.detail.clerkName || '' }}</span>
        </div>
        <div class="desc-item">
          <div>预订人数：</div>
          <span>{{ postMessageDatas.detail.bookInfo.use_num || 0 }}</span>
        </div>
        <div class="desc-item">
          <div>预订席数：</div>
          <span>{{ postMessageDatas.detail.bookInfo.book_num || 0 }}</span>
        </div>
        <div class="desc-item">
          <div>单席金额：</div>
          <span>{{ postMessageDatas.detail.bookInfo.money || 0 }}</span>
        </div>
        <div class="desc-item">
          <div>预订类型：</div>
          <span>{{ postMessageDatas.detail.bookInfo.bookType.name || '' }}</span>
        </div>
        <div class="desc-item">
          <div>预订时间：</div>
          <span>{{ postMessageDatas.detail.bookInfo.book_time.text || '' }}</span>
        </div>
        <div class="desc-item">
          <div>预订人：</div>
          <span>{{ postMessageDatas.detail.bookInfo.user_name || '' }}</span>
        </div>
        <div class="desc-item">
          <div>联系方式：</div>
          <span>{{ postMessageDatas.detail.bookInfo.mobile || '' }}</span>
        </div>
        <div class="desc-item">
          <div>预订金：</div>
          <span>{{ postMessageDatas.detail.bookInfo.book_money || 0 }}</span>
        </div>
        <div class="desc-item">
          <div>备注：</div>
          <span>{{ postMessageDatas.detail.bookInfo.remark || '' }}</span>
        </div>
        <div class="desc-line"></div>
        <div class="desc-title">桌台详情</div>
        <div class="desc-item">
          <div>主台：</div>
          <span>{{ postMessageDatas.detail.mainDeskName || '无' }}</span>
        </div>
        <div class="desc-item">
          <div>配台：</div>
          <span>{{ postMessageDatas.detail.subDeskName|| '无' }}</span>
        </div>
        <div class="desc-line"></div>
        <template v-if="postMessageDatas.detail.foodList.length">
          <div class="desc-title">预订菜品</div>
          <div class="desc-item">
            <div>菜品名称</div>
            <div class="desc-item-right">
              <span>数量</span>
              <p>金额</p>
            </div>
          </div>
          <div class="desc-line"></div>
          <div
            class="good-list-box"
            v-for="(food,index) in postMessageDatas.detail.foodList"
            :key="index"
          >
            <div class="good-item">
              <div>{{ food.name }}</div>
              <div class="good-right-box">
                <span>{{ food.num }}份</span>
                <p>￥{{ food.total_money }}</p>
              </div>
            </div>
            <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
              （{{ dealFoodSkuDescFun(food) }}）
            </div>
          </div>
          <div class="desc-line"></div>
        </template>
        <div class="desc-item">
          <div>合计金额：</div>
          <span>{{ postMessageDatas.detail.priceInfo.payMoney||0 }}</span>
        </div>
        <div class="address-phone-box">
          <div>餐厅地址：{{ postMessageDatas.detail.shopInfo.address||'' }}</div>
          <div>餐厅电话：{{ postMessageDatas.detail.shopInfo.phone||'' }}</div>
          <div>技术支持：贵州一粒米科技餐饮软件服务有限公司</div>
        </div>
      </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          postMessageDatas: {
            detail: {
              bookInfo: {
                subDeskName: 'A1',
                use_num: 1,
                book_num: 1,
                money: 50,
                name: '宫保鸡丁',
                sku_desc: '（宫保鸡丁）',
                total_money: 50,
                bookType: {
                  name: '个人预定'
                },
                book_time: {
                  text: '2024-11-08 00:00:00'
                },
                user_name: '小狄',
                mobile: '17680644905',
                book_money: 0,
                remark: '',
                clerk_remark: '',
                status: {
                  text: '未开台'
                },
                is_delete: 0,
                create_time: '2024-11-07 22:29:49',
                update_time: '2024-11-07 22:29:49',
                book_over_time: {
                  text: '2024-11-08 00:30:00'
                },
                deskIds: ['2hzpxvve3j']
              },
              foodList: [
                { name: '宫保鸡丁', num: 2, total_money: 50, notes: ['宫保鸡丁'] },
                { name: '麻婆豆腐', num: 1, total_money: 20, notes: ['麻婆豆腐'] }
              ],
              priceInfo: {
                payMoney: 70
              },
              shopInfo: {
                address: '贵州省贵阳市南明区花果园',
                phone: '0851-12345678'
              }
            }
          }
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, mess, printerPage) => {
            this.postMessageDatas = mess
            // 获取内容高度并发送打印请求
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
            })
          })
        },
        methods: {
          // 处理回显菜品的规格信息（做法+口味+部位）
          dealFoodSkuDescFun(item) {
            if (item && item.notes && item.notes.length) {
              return item.notes.join('、')
            } else {
              return false
            }
          }
        }
      })
    </script>
  </body>
</html>
